<template>
	<view class="bg">
		<view class="head">
			<image class="head_left" src="../../../static/wode/return.png" mode="" @tap="back()"></image>
			<view class="head_mid">
				注册
			</view>
			<view class="head_right">
			</view>
		</view>
	<!-- 	<view class="phone" v-if='!nickName'>
			<view class="">
				<view class="body_item">
					<image src="../../../static/index/ren.png" mode=""></image>
					<input type="text" maxlength='11' value="" placeholder="请输入手机号码" v-model="userPhone" />
				</view>
			</view>
			<view class="btn" @tap="bindUser">
				确定
			</view>
		</view> -->
		<view class="" v-if="hierarchy==1">
			<view class="" v-if="index==0">
				<view class="body_item">
					<image src="../../../static/index/ren.png" mode=""></image>
					<input type="text" value="" placeholder="请输入手机号码" v-model="loginName" />
				</view>
			</view>
			<view class="btn" @tap="getCode" v-if="isShow">
				{{btntext}}
			</view>
			<view class="mask-box" v-else>
				{{btntext}}
			</view>
			<view class="body_bottom">
				<image src="../../../static/index/theselected.png" mode="" @tap="toAgree" v-if="agree"></image>
				<image src="../../../static/index/uncheck.png" mode="" @tap="toAgree" v-else></image>
				<view class="">
					同意相关的<text>服务条款</text>及<text>隐私策略</text>
				</view>
			</view>
		</view>
		<!--输入验证码页面-->
		<view class="" v-else-if="hierarchy==2">
			<view class="body">
				<validcode :maxlength="4" :isPwd="false" @finish="getmyCode"></validcode>
				<!-- <input  @input="nextFocus(1)" type="number" value="" maxlength="1" v-model="code1" autofocus="autofocus" />
				<input  @input="nextFocus(2)"  type="number" value="" maxlength="1" v-model="code2" />
				<input  @input="nextFocus(3)"  type="number" value="" maxlength="1" v-model="code3" />
				<input  @input="nextFocus(4)"  type="number" value="" maxlength="1" v-model="code4" @change="loseFocus" /> -->
			</view>
			<view class="btn" @tap="getCode">
				重新获取<text v-if="isDisplay">（{{time}}）</text>
			</view>
		</view>

		<!--设置密码页面-->
		<view class="" v-else-if="hierarchy==3">
			<view class="body-bottom">
				<view class="body_item_password">
					<image class="passimg" src="../../../static/index/mima.png" mode=""></image>
					<input type="password" value="" placeholder="密码由6-20位数字字母组成" v-model="password" @blur="verifyPassword" />
					<image class="delete" src="../../../static/index/delete.png" mode="" v-if="showClearIcon" @click="clearIcon"></image>
				</view>
				<view class="body_item_password">
					<image class="passimg" src="../../../static/index/mima.png" mode=""></image>
					<input type="password" value="" placeholder="重复输入密码" v-model="respassword" @blur="resPassword" />
					<image class="delete" src="../../../static/index/delete.png" mode="" v-if="showClearIcon" @click="clearIcon"></image>
				</view>

			</view>
			<view class="btn" v-if="isNavto" @tap="toSupplement()">
				保存密码
			</view>
			<view class="mask-box" v-else>
				保存密码
			</view>
		</view>
	</view>
</template>

<script>
	import validCode from '../../../components/validCode.vue'
	export default {
		components:{
			validCode
		},
		data() {
			return {
				nextFocus : 1,
				agree: true,
				index: 0,
				btntext: '获取验证码',
				loginName: '', //手机号码或邮箱
				isShow: true,
				hierarchy: 1, //判断页面层级
				time: '59',
				code1: '',
				code2: '',
				code3: '',
				code4: '',
				code:'',
				isDisplay: true,
				password: '', //密码
				respassword: '', //重复输入密码
				user_id: '',
				isNavto: true,
				avatar:'',
				nickName:'',
				openid:'',
				userPhone:'',
				wxNavTo:true
				// 				smsCode:'',
				// 		      code:new Array(4),
				// 		      codeId:['first','second','third','forth','fifth']
			};
		},
		onLoad(options){
			// console.log(options, '...----////')
			this.avatar = options.avatar
			this.nickName = options.nickName
			this.openid = options.openid
			this.wxNavTo = this.avatar ? false : true
		},
		mounted() {
			this.hierarchy = 1
		},
		onShow() {
			uni.clearStorage()
		},
		
		methods: {
			bindUser(){
				console.log({
						avatar:this.avatar,
						nick_name:this.nickName,
						wx_openid:this.openid,
						login_name: this.loginName,
						verification_code: this.code
				})
				this.myAjaxNewPost({
					model: 'user',
					controllerName: 'user',
					actionName: 'openIdLoginOrRegist',
					data:{
						avatar:this.avatar,
						nick_name:this.nickName,
						wx_openid:this.openid,
						login_name: this.loginName,
						verification_code: this.code
					},
					successBack:function(res){
						console.log(res, '登录返回参数');
						uni.setStorageSync('user_id', res.data.data.userInfoEntity.user_id);
						console.log(res.data.data.userInfoEntity.user_id + '登录ID！')
						uni.setStorageSync('avatar', res.data.data.userInfoEntity.avatar);
						uni.setStorageSync('nick_name', res.data.data.userInfoEntity.nick_name);
						uni.setStorageSync('user_info', res.data.data.userInfoEntity);
						uni.setStorageSync('user_sign', res.data.data.userSign)
						var arr = res.data.data.userInfoEntity.hometown.split('·')
						uni.setStorageSync('countryName', arr[0])
						uni.switchTab({
							url: '/pages/tabBer/CrossBorder/CrossBorder'
						})
					}
				})
			
			},
			nextFocus:function(fNem){
				if(fNem){
					console.log(fNem)
				}
				
			},
			getmyCode(val){
				this.code=val;
				if(this.wxNavTo){
					this.register()
				}else{
					this.bindUser()
				}
				
			},
			register() { //注册
				var data = {
					login_name: this.loginName,
					verification_code: this.code
				}
				console.log(data)
				var me = this;
				this.myAjaxNewPost({
					model: 'user',
					controllerName: 'user',
					actionName: 'register',
					data: data,
					successBack: function(res) {
						console.log(res);
						if (res.data.data != null) {
							console.log(res)
							me.user_id = res.data.data.user_id
							
							uni.setStorageSync('user_id', me.user_id)
							uni.showToast({
								title: res.data.data.message,
								icon: 'none'
							})
						} else {
							uni.showToast({
								title: res.data.message,
								icon: 'none'
							})
						}

						if (res.data.code == '0') {
							me.hierarchy = 3 //替换页面内容成设置密码
							me.showGetCode = false;
						} else if (res.data.code == '10016') {
							this.hierarchy = 1
						}
					},
				})
			},
			toAgree() {
				this.agree = !this.agree
				if (this.agree) {
					this.isShow = true
				} else {
					this.isShow = false
				}
			},
			verifyPassword() { //验证密码
				var reg = '^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,20}$'
				if (!this.password.match(reg)) {
					uni.showToast({
						title: '请输入6-20位数字字母组合密码',
						icon: 'none'
					})
				}
			},
			resPassword() {
				if (this.password != this.respassword) { //两次密码不一致
					uni.showToast({
						title: '密码不一致！',
						icon: 'none'
					})
				} else {
					this.isNavto = true;
				}
			},
			toSupplement() {
				var data = {
					login_pass: this.password,
					user_id: this.user_id,
					login_name:this.loginName
				}
				
				console.log(data)
				var me = this;
				this.myAjaxNewPost({
					model: 'user',
					controllerName: 'user',
					actionName: 'update',
					data: data,
					successBack: function(res) {
						console.log(res);
						uni.showToast({
							title: res.data.message,
							icon: 'none'
						})
						if (res.data.code == '0') {
							uni.setStorageSync('user_id',me.user_id)
							uni.setStorageSync('password',me.password)
							uni.setStorageSync('loginName',me.loginName)
							uni.switchTab({ //完成后跳转到完善用户信息页面
								// url: '../supplement/supplement?user_id=' + me.user_id,
								url:'../../../pages/tabBer/CrossBorder/CrossBorder'
							})
						}
					},
				})

			},
			back() {
				uni.navigateBack({
					delta: 1
				})
			},
			getCode() { //获取验证码
				if (this.loginName == '') {
					uni.showToast({
						title: '请输入手机号',
						icon: 'none'
					})
				} else {
					if (this.loginName.indexOf('@') != -1) {
						this.sendEmailCode();
					} else {
						this.sendTelCode();
					}
				}
			},
			sendTelCode(type) { //发送手机验证码
				this.code1 = ''
				this.code2 = ''
				this.code3 = ''
				this.code4 = ''
				var data = {
					mobile: this.loginName
				};
				var me = this;
				this.myAjaxNew({
					model: 'user',
					controllerName: 'sms',
					actionName: 'send',
					data: data,
					successBack: function(res) {
						console.log(res);
						uni.showToast({
							title: res.data.message,
							icon: 'none'
						})
						if (res.data.code == 0) { //返回成功
							me.hierarchy = 2 //替换页面内容成输入验证码
							// me.showGetCode = false;
							me.computeTime();
						}else{
							uni.showToast({
								title: res.data.message,
								icon:'none'
							});
						}
					},
				})
			},
			sendEmailCode() { //发送邮箱验证码
				var data = {
					mail: this.loginName,
					type:'register'
				};
				var me = this;
				this.myAjaxNew({
					model: 'user',
					controllerName: 'mail',
					actionName: 'send',
					data: data,
					successBack: function(res) {
						console.log(res);
						uni.showToast({
							title: res.data.message,
							icon: 'none'
						})
						if (res.data.code == 0) {
							me.hierarchy = 2 //替换页面内容成输入验证码
							// me.showGetCode = false;
							me.computeTime();
						}
					},
				})
			},
			computeTime() {
				var me = this;
				clearInterval(interval);
				var interval = setInterval(function() {
					if (me.time > 0) {
						me.time--;
					}
					if (me.time <= 0) {
						me.isDisplay = false
					}
				}, 1000)
			},

		},
	}
</script>

<style scoped>
	.bg {
		background: #FFFFFF;
		height: 100%;
	}

	.head {
		width: 162upx;
		background: #FFFFFF;
		display: flex;
		justify-content: space-between;
		align-items: center;
		color: #333333;
		width: 100%;
		padding: 0 24upx;
	}

	.head_right {
		width: 45upx;
	}
	.head_mid{
		padding-top: 90upx;
	}
	.head_left{
		padding-top: 70upx;
	}

	.head image {
		width: 21upx;
		height: 36upx;
	}

	.body_item {
		padding: 20upx 24upx;
		display: flex;
		align-items: center;
		border-bottom: 1upx solid #E6E6E6;
		margin-top: 120upx;
		margin-bottom: 90upx;
		font-size: 28upx;
	}

	.body_item image {
		width: 36upx;
		height: 40upx;
		margin-right: 10upx;
	}

	.mask-box {
		width: 702upx;
		height: 88upx;
		background: rgba(70, 206, 207, .5);
		border-radius: 10upx;
		color: #FFFFFF;
		text-align: center;
		line-height: 88upx;
		margin: 0 auto;
		font-size: 32upx;
	}

	.body_bottom {
		font-size: 28upx;
		position: absolute;
		bottom: 40upx;
		right: 170upx;
		display: flex;
		align-items: center;
	}

	.body_bottom text {
		color: #008AFF;
		text-decoration: underline;
	}

	.body_bottom image {
		width: 28upx;
		height: 28upx;
		margin-right: 10upx;
	}

	/*输入验证码页面*/
	.body {
		display: flex;
		justify-content: space-around;
		padding: 0 24upx;
		box-sizing: border-box;
	}

	.body input {
		width: 104upx;
		height: 104upx;
		border-radius: 10upx;
		background: #f5f5f5;
		margin-top: 100upx;
		text-align: center;
		margin-bottom: 90upx;
	}

	/*设置密码页面*/
	.body-bottom {
		margin-top: 40upx;
		margin-bottom: 88upx;
	}

	.body_item_password {
		border-bottom: 1upx solid #E6E6E6;
		display: flex;
		align-items: center;
		padding: 20upx 24upx;
		font-size: 28upx;
		color: #333333;

	}

	.body_item_password .passimg {
		width: 46upx;
		height: 40upx;
		margin-right: 20upx;
	}

	.body_item_password .delete {
		width: 28upx;
		height: 28upx;
	}

	.body_item_password input {
		width: 100%;

	}
</style>
